<template>

  <div class="desktop-search-input-pc">
    <el-input v-model="searchParam.name" class="search-input" :prefix-icon="Search" placeholder="搜索提示词" @keyup.enter="getPromptList"/>
    <el-button type="success" @click="addPrompt">新增</el-button>
  </div>

  <div class="comm-layout-wrap">
    <div class="m-header"><span>我的提示词</span></div>
  
    <template v-if="tempTypeList.length === 0" >
      <div class="tmall-empty">
        <div class="tmall-empty-img"></div>
        <div class="tmall-tell-us">暂无数据，请点击上方新增按钮创建新提示词</div>
      </div>
    </template>
    <template v-else>
      <div class="st-list">
        <div class="st-item" v-for="item in tempTypeList" :key="item.id + item.name + item.content">
          <div class="st-top">
            <div class="st-box">
              <div class="st-text-box" >
               {{ item.content }}
               </div>
            </div>
          </div>
          <div class="st-bottom">
            <div class="st-title">
              <el-icon class="title-icon" size="18" color="#409eff"><List /></el-icon>
              <span class="title-name">{{ item.name }}</span>
            </div>
          </div>
          <div class="hover-btn-wrap">
            <el-tooltip
              effect="light"
              content="预览"
              placement="bottom"
            >
              <el-button circle type="primary" :icon="View" @click="viewPrompt(item)"></el-button>
            </el-tooltip>
            <el-tooltip
              effect="light"
              content="编辑"
              placement="bottom"
            >
              <el-button circle type="primary" :icon="Edit" @click="editPrompt(item)"></el-button>
            </el-tooltip>
            <el-tooltip
              effect="light"
              content="删除"
              placement="bottom"
            >
              <el-button circle type="danger" :icon="DeleteFilled" @click="deleteTemplate(item.id)" />
            </el-tooltip>
          </div>
        </div>
      </div>
    </template>  
  </div>


  <!-- 新建提示词对话框 -->
  <el-dialog
    v-model="promptModel.dialogVisible"
    :title="`${!promptModel.form.id ? '新建' : '编辑'}提示词`"
    width="520"
    @close="promptModel.cancel"
  >
    <el-form 
      :model="promptModel.form" 
      :rules="promptModel.rules" 
      ref="promptFormRef" 
      label-width="90px"
      :label-position="'top'"
      :disabled="!promptModel.isEdit"
    >
      <el-form-item label="提示词名称" prop="name">
        <el-input v-model="promptModel.form.name" maxlength="20" show-word-limit placeholder="请输入唯一的模板名称" />
      </el-form-item>
      <el-form-item label="提示词内容" prop="content">
        <el-input
          v-model="promptModel.form.content"
          type="textarea"
          :rows="10"
          maxlength="1000"
          show-word-limit
          placeholder="请描述提示词的具体需求，描述越详细，生成越精准"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer" v-if="promptModel.isEdit">
        <el-button @click="promptModel.cancel">取消</el-button>
        <el-button type="primary" :loading="promptModel.loading" @click="promptModel.confirm">{{!promptModel.form.id ? '保存' : '保存'}}</el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { Edit, List, Search, DeleteFilled, View } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { promptApi } from '@/api/prompt';
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute();
const router = useRouter();

const searchParam = ref({
  name: ''
});

const tempTypeList = ref<any>([])

// 获取提示词列表
const getPromptList = async () => {
  try {
    const res = await promptApi.list(searchParam.value);
    if (res) {
      tempTypeList.value = res;
    } else {
      console.error('获取模板列表失败');
    }
  } catch (error) {
    console.error('请求错误:', error);
  }
}

const promptFormRef = ref();
const promptModel = reactive({
  dialogVisible: false,
  isEdit: true,
  form: {
    id: '',
    name: '',
    content: ''
  },
  rules: {
    name: [
      { required: true, message: '请输入提示词名称', trigger: 'blur' }
    ],
    content: [
      { required: true, message: '请输入提示词内容', trigger: 'blur' }
    ],
  },
  loading: false,

  cancel: () => {
    promptModel.dialogVisible = false;
    promptModel.form.name = '';
    promptModel.form.content = '';
    promptModel.isEdit = true;
    promptFormRef.value.resetFields();
    promptModel.loading = false;
  },
  confirm: () => {
    promptFormRef.value.validate(async (valid:boolean) => {
      if (valid) {
        promptModel.loading = true;

        (!promptModel.form.id ? 
          promptApi.create(promptModel.form) : 
          promptApi.update(promptModel.form.id, promptModel.form)
        )
        .then(res => {
          ElMessage.success(`${!promptModel.form.id ? '新建': '修改'}提示词成功`);
          promptModel.dialogVisible = false;
        }).catch(error => {
          promptModel.loading = false;
          ElMessage.error(`${!promptModel.form.id ? '新建': '修改'}提示词失败`);
        });
      }
    });
  }
});

// 新增模板
const addPrompt = () => {
  promptModel.dialogVisible = true;
}

// 新增模板
const editPrompt = (item: any) => {
  promptModel.dialogVisible = true;

  promptModel.form = {...item}
}

const viewPrompt = (item: any) => {
  promptModel.dialogVisible = true;
  promptModel.isEdit = false;
  promptModel.form = {...item}
}


// 提示词模板
const deleteTemplate = async (id: string) => {
  ElMessageBox.confirm(
    '确认删除吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  ).then(async () => {
    try {
      await promptApi.remove(id);
      ElMessage.success('删除提示词成功');
      getPromptList(); // 刷新列表
    } catch (error) {
      ElMessage.error('删除提示词失败');
    }
  })
}

onMounted(() => {
  getPromptList();
});
</script>

<style lang="less" scoped>
.desktop-search-input-pc{
  display: flex;
  flex: 1 1;
  margin-right: auto;
  max-width: 720px;
  min-width: 220px;
  transform: translateY(-10px);
  margin-top: -40px;

  .search-input{
    height: 40px;
  }

  :deep(.el-button) {
    height: 38px;
    line-height: 38px;
    margin-left: 15px;
  }
}

.comm-layout-wrap{
}


@media screen and (min-width: 1300px) {
  .st-list {
    grid-template-columns: repeat(4, 1fr)!important;
  }
}
@media screen and (min-width: 1500px) {
  .st-list {
    grid-template-columns: repeat(5, 1fr)!important;
  }
}
@media screen and (min-width: 1600px) {
  .st-list {
    grid-template-columns: repeat(6, 1fr)!important;
  }
}

.st-list {
  grid-gap: 16px;
  align-items: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  padding: 20px ;

  .st-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 2px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .08);
    box-sizing: border-box;
    cursor: pointer;
    height: auto;
    opacity: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .st-top {
    padding: 12px 12px 0;

    .st-box {
      position: relative;
      border: 1px solid rgba(0, 0, 0, .04);
      border-radius: 4px;
      box-sizing: content-box;
      overflow: hidden;
      width: 100%;
      padding-bottom: 56.25%;

      

      .st-text-box{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        // opacity: .5;

        &::before{
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          // background: rgba(0, 0, 0, .1);
          background: #f5f7fa;
          opacity: .5;
        }
      }
    }
  }

  .st-bottom {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: #fff;

    .st-title{
      display: flex;
      align-items: center;
      height: 20px;
      .title-icon{
        height: 20px;
        margin-right: 4px;
        width: 20px;
      }
      .title-name{
        color: rgba(0,0,0,.88);
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .st-item:hover {
    .hover-btn-wrap {
      opacity: 1;
      visibility: visible;
    }
  }

  .hover-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .64);
    transition: all .1s;
    cursor: auto;
    z-index: 1;
    opacity: 0;
    visibility: hidden;

    .el-button {
      font-size: 16px;
    }
  }
}

.tmall-empty{
  align-items: center;
  display: flex;
  flex-direction: column;

  .tmall-empty-img{
    background-image: url(@/assets/img/empty.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    margin-bottom: 4px;
    width: 220px;
  }
  .tmall-tell-us {
    margin: 40px 0;
    text-align: center;
    font-size: 16px;
    color: rgba(0,0,0,.4);
  }
}

.m-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0,.04);
  border-bottom: 1px solid var(--border-weak, rgba(0, 0, 0,.04));
  font-size: 16px;
}
</style>